<template>
<dl :class="$style.container">
  <dt>影视圈</dt>
  <template v-if="comments.length > 0">
    <dd v-for="(item,idx) in comments" :key="'comment'+idx" >
    <div :class="$style.top">
      <img v-lazy="$prefix +'downLoadFile?fileId=' + item.avatar"/>
      <span :class="$style.username">{{ item.username || '未知用户'}}</span>
      <span :class="$style.date">{{ formatTime(new Date(item.createdAt)) }}</span>
      <rater v-model="item.star" :max="10" active-color="#e36049" :font-size="12"></rater>
    </div>
    <p v-html="item.content" :class="$style.desc"></p>
  </dd>
  </template>
  <dd v-if="!isDisplayEditor">
    <p :class="$style.text">我来评分:</p>
    <rater v-model="star" :max="10" active-color="#e36049" :font-size="20" :class="$style.star"></rater>
    <group>
      <div slot="title" :class="$style.text">我来评论</div>
      <x-input  v-model="title" placeholder="请输入标题"></x-input>  
      <x-textarea :max="200" placeholder="请输入您的评论" :show-counter="false" :height="80" :rows="4" :cols="30" v-model="text"></x-textarea>
    </group>
    <x-button type="parmary" :class="$style.btn" @click.native="handleBtnClick">评论</x-button>
  </dd>
  <div>
    <toast v-model="showToast" :text="tip"></toast>
  </div>
</dl>
</template>

<script>
import { Rater, XTextarea, Group, XButton, XInput, Toast } from 'vux'
import { setTimeout } from 'timers'
export default {
  props: {
    comments: {
      type: Array,
      default: () => []
    },
    film: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      showToast: false,
      tip: '',
      star: 0,
      text: '',
      title: '',
      userId: ''
    }
  },
  components: {
    Rater,
    XTextarea,
    Group,
    XButton,
    XInput,
    Toast
  },
  created () {
    this.userId = this.$store.getters.user.userId
  },
  computed: {
    isDisplayEditor () {
      return this.comments.some(item => Number(item.from) === this.userId)
    }
  },
  methods: {
    /**
     * 人性化时间处理 传入时间戳
     */
    formatTime (timestamp) {
      let mistiming =
        Math.round(new Date() / 1000) - Math.floor(timestamp / 1000)
      let arrr = ['年', '个月', '星期', '天', '小时', '分钟', '秒']
      let arrn = [31536000, 2592000, 604800, 86400, 3600, 60, 1]
      for (var i = 0; i < arrn.length; i++) {
        let inm = Math.floor(mistiming / arrn[i])
        if (inm !== 0) {
          return inm + arrr[i] + '前'
        }
      }
    },
    // 评论
    async handleBtnClick () {
      try {
        let token = this.$Cookie.getToken() || ''
        if (!token) {
          this.tip = '请先去登录再来评论吧'
          this.showToast = true
          setTimeout(() => {
            this.$router.push({
              path: '/login'
            })
          }, 3000)
          return false
        }
        let params = {
          star: this.star,
          title: this.title,
          content: this.text,
          id: this.film.doubanId,
          name: this.film.original_title
        }
        if (this.star <= 0) {
          this.tip = '请先评分'
          this.showToast = true
          return false
        }
        if (!this.title) {
          this.tip = '请填写评论标题'
          this.showToast = true
          return false
        }
        if (!this.text) {
          this.tip = '请先填写评论内容'
          this.showToast = true
          return false
        }
        let res = await this.$http.post(`/comment/add`, params)
        if (res.code === 0) {
          this.tip = '评论成功'
          this.showToast = true
        } else {
          this.tip = '评论失败'
          this.showToast = false
        }
        this.$emit('commentSuccess')
      } catch (err) {
        console.log('comment fail:', err)
      }
    }
  }
}
</script>

<style lang='less' module>
.container {
  margin-top:30px;
  padding: 10px;
  box-sizing: border-box;
  dt {
    font-weight: 700;
    font-size: 15px;
    line-height: 30px;
    color: rgba(216,233,245,1);
  }
  dd {
    .top {
      margin-bottom:10px;
      img {
        margin-right:6px;
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        object-fit: cover;
        vertical-align: middle;
      }
      .username {
        font-size:12px;
        color:#fff;
      }
      .date {
        margin-left:20px;
        margin-right:20px;
        font-size:12px;
        color:#fff;
      }
    }
    .desc {
      font-size: 13px;
      line-height: 21px;
      margin-bottom: 6px;
      color: rgba(255,255,255,.6);
      img {
        width: 100px;
        object-fit: cover;
      }
    }
    .text {
      margin-top:10px;
      color:#fff;
      font-size:14px;
    }
    .star {
      margin-top:10px;
      margin-left:10px;
    }
    .btn {
      margin-top:50px;
      margin-bottom:20px;
      background: #e36049;
      color:#fff;
    }
  }
}

</style>